<template>
  <div>
    <a-input  placeholder="请输入文章标题" style="height: 50px"
    v-model:value="searchText"> </a-input>
    <br />
    <br />
    <br />
    <div ref="editor" style="height: 50vh"></div>
   <div style="position: absolute;bottom: 3vh;">
    <a-button @click="getText" style="margin-right: 20px">确认提交</a-button>
    <!-- <a-button @click="setHtml">设置内容</a-button> -->
   </div>
   </div>
</template>
<script>
import { articleUpload } from "@/api/Login";
import { message } from "ant-design-vue";

import E from "wangeditor";
export default {
  data() {
    return {
      editor: null,
      searchText:''
    };
  },
  mounted() {
    this.editor = new E(this.$refs.editor);
    this.editor.create();
    // this.editor.txt.html('<p>这是新的内容</p>');
  },
  methods: {
    getText() {
      let text = this.editor.txt.html();
      let data = {
        title:this.searchText,
        contents:text,
      };
      articleUpload(data).then((res) => {
        if (res.code == 200) {
         message.success(res.data.data)
        }
      });
    },
    setHtml() {
      editor.setHtml("<p>Hello, World!</p>");
    },
  },
};
</script>
<style>
.w-e-text-container {
  height: 45vh !important;
}
/* 样式可以根据需求自定义 */
</style>
